Estoy tratando de crear y llamar a una función que crea un elemento <select> y devuelve este elemento para que se represente en la pantalla.

Sin embargo, muestra el texto "[object HTMLSelectElement]" en la pantalla en lugar del elemento <select> que quiero. Sin embargo, en la consola de Chrome, representa perfectamente el elemento <select> .

 function renderSelect(selectOptions) { var select = document.createElement("select"); for (let index = 0; index < selectOptions.length; index++) { const element = selectOptions[index]; select.insertAdjacentHTML( "beforeend", `<option value="${element}">${element}</option>` ); } // This shows the <select> element perfectly in the console console.log(select) return select; } ////////// BELOW IS THE FUNCTION CALL IN ANOTHER (WHICHEVER) PART OF THE CODE // This renders "[object HTMLSelectElement]" on the screen instead of the <select> element `${renderSelect(selectOptions)}`;